<template>
    <h1>{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
    <br>
    <h1>你好 {{ msg }}</h1>
    <br>
    <button @click="msg += '1'">点我修改msg</button>

    <br>
    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <h1>薪资：{{ person.job.j1.salary }}K</h1>
    <h1>薪资：{{ person.job.j2.salary }}K</h1>
    <button @click="person.name += '1'">点我修改姓名</button>
    <button @click="person.age++">点我修改年龄</button>
    <button @click="person.job.j1.salary++">涨薪</button>

    <hr />
</template>

<script>
import { ref, reactive, watchEffect } from "vue";
export default {
    name: "App",
    setup() {
        const sum = ref(0);
        const msg = ref("Vue");
        const person = reactive({
            name: "张三",
            age: 18,
            job: {
                j1: {
                    salary: 20
                },
                j2: {
                    salary: 30
                }
            }
        });


        /**
         * 自动收集依赖
         * 当前回调函数的所依赖响应式数据发生变化时，回调函数会自动执行
         */
        watchEffect(() => {
            console.log('watchEffect');
            console.log('哈哈哈哈', person.job.j1.salary);
        })


        /**
         * 自动收集依赖
         * 当前回调函数的所依赖响应式数据发生变化时，回调函数会自动执行
         * 注意：watchEffect的回调函数中，如果存在异步操作，那么异步操作中的代码不会自动收集依赖
         */
        watchEffect(() => {
            console.log('watchEffect2');
            console.log('哈哈哈哈', person.job.j1.salary);
            setTimeout(() => {
                console.log('settimeout', person.name);
            });
        })

        return {
            person,
            sum,
            msg,
        };
    },
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
